<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('feedingMana.小料管理')" />
    <SearchCom
      :searchList="searchList"
      @search="handleSearch"
      @reset="handleReset"
    />
    <div class="mt12 toolbar flex_aic" v-my-point="'skuMaterial:add'">
      <div class="addBtn flex_aic_jcc" @click="handleAdd()">
        <SvgIcon name="iconxinzeng" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ $t('feedingMana.新增小料') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      row-key="id"
      border
      v-loading="loading"
    >
      <el-table-column :label="$t('feedingMana.序号')" type="index" width="80" />
      <el-table-column :label="$t('feedingMana.小料名称')" :prop="'name' + locale" />
      <el-table-column :label="$t('feedingMana.价格')" prop="price" />
      <el-table-column :label="$t('feedingMana.排序')" prop="sort" />
      <el-table-column :label="$t('feedingMana.状态')" prop="status">
        <template #default="scope">
          <el-switch
            v-if="scope.row.status == 1"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            :active-text="$t('feedingMana.启用')"
            :inactive-text="$t('feedingMana.停用')"
            @change="(v) => handleStatusChange(v, scope.row)"
            v-my-point="'skuMaterial:disable'"
          />
          <el-switch
            v-if="scope.row.status == 0"
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            :active-text="$t('feedingMana.启用')"
            :inactive-text="$t('feedingMana.停用')"
            @change="(v) => handleStatusChange(v, scope.row)"
            v-my-point="'skuMaterial:enable'"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('feedingMana.操作')" width="300">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button type="text" @click="handleEdit(scope.row)" v-my-point="'skuMaterial:edit'"
              >{{ $t('feedingMana.编辑') }}</el-button
            >
            <el-popconfirm
              :title="$t('feedingMana.确定删除吗')"
              @confirm="handleDelete(scope.row)"
              width="300px"
            >
              <template #reference>
                <el-button type="text" size="small" v-my-point="'skuMaterial:del'">{{ $t('feedingMana.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex_aic_jcc mt10 w-full">
      <el-pagination
        v-model="currentPage"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model:show="showEditDia" :data="editData" @refresh="refresh" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import EditDia from "./editDia.vue";
import { ElMessage } from "element-plus";

const { t, locale } = useI18n();
const showEditDia = ref(false);
const editData = ref({});
// 商家ID、菜品名称、发布时间、菜品分类进行搜索
const searchList = ref([
  {
    label: t('feedingMana.小料名称'),
    key: "name",
    type: "input",
  },
]);

const fetchMessages = (params) => {
  console.log("params===", params);
  // 添加语言参数
  return Api.listSkuMaterial({
    ...params,
    ["name" + locale.value]: params.name,
  });
};

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(fetchMessages);

const handleAdd = () => {
  showEditDia.value = true;
  editData.value = {};
};

const handleEdit = (row) => {
  editData.value = row;
  showEditDia.value = true;
};

const handleDelete = (row) => {
  Api.deleteTenantTable([row.id]).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t('feedingMana.删除成功'));
      getDataList();
    }
  });
};

const handleStatusChange = (v, row) => {
  if (v) {
    Api.enableSkuMaterial(row.id).then((res) => {
      if (res.status == 200) {
        ElMessage.success(t('feedingMana.启用成功'));
        getDataList();
      }
    });
  } else {
    Api.disableSkuMaterial(row.id).then((res) => {
      if (res.status == 200) {
        ElMessage.success(t('feedingMana.停用成功'));
        getDataList();
      }
    });
  }
};

const refresh = () => {
  currentPage.value = 1;
  getDataList();
};
</script>
<style lang="scss" scoped></style>
